import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {
  Text,
  Container,
  Content,
  Header,
  Left,
  Right,
  Button,
  Body,
  Title,
  Form,
  Item,
  List,
  ListItem,
  Label
} from 'native-base';
import Swipeout from 'react-native-swipe-out';
import {getOvertimeList, deleteOvertime} from '../actions/overtimeAction';


export default class OvertimeList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      overtimeList: []
    }
  }

  componentWillMount() {
    getOvertimeList(data => this.setState({overtimeList: data}));
  }

  deleteOvertime(data, index) {
    deleteOvertime({...data, index}, this.props.total, ({overtimeList, totalNum}) => {
      this.props.updateTotal(totalNum);
      this.setState({overtimeList});
    });
  }

  renderItem(data, a, index) {
    const right = [
      {
        text: '删除',
        backgroundColor: 'red',
        onPress: this.deleteOvertime.bind(this, data, ~~index)
      }
    ];
    return (
      <Swipeout
        backgroundColor="#FFFFFF"
        autoClose
        right={right}>
        <ListItem>
          <View style={style.item}>
            <Text style={{color: data.type === 'add' ? 'red' : 'green'}}>
              {`${(data.type === 'add' ? '加班' : '补休')} ${data.time} 小时`}
            </Text>
            <Text>
              {data.date}
              <Text style={{color: 'gray', fontSize: 16}}>({data.recordDate})</Text>
            </Text>
          </View>
        </ListItem>
      </Swipeout>
    )
  }

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent onPress={() => this.props.navigator.pop()}>
              <Text> 返回</Text>
            </Button>
          </Left>
          <Body>
          <Title>记录列表</Title>
          </Body>
          <Right><Text> </Text></Right>
        </Header>
        <Content>
          <List dataArray={this.state.overtimeList}
                renderRow={this.renderItem.bind(this)}/>
        </Content>
      </Container>
    );
  }
}
const style = StyleSheet.create({
  item: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  add: {
    color: 'red'
  },
  minus: {
    color: 'green'
  }
});
